<template>

  <el-form ref="importFormRef">

    <!--图片显示-->
    <div class="A_picture">
      <!--图片上传及预览-->
      <el-upload
        action="/"
        ref="upload"
        :on-change="uploadFile"
        :http-request="httpRequest"
        :before-upload="beforeUpload"
        :on-exceed="handleExceed"
        :limit="1"
        list-type="picture-card"
        :auto-upload="false">
        <img :src="goods.gImg" width="146px" height="146px">
        <i slot="default" class="el-icon-plus"></i>
        <span class="el-upload-list__item-actions">
        </span>
        <div slot="file" slot-scope="{file}">

          <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt="没有图片"
          >
          <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>

    </div>

    <!--图片基本信息-->
    <div class="A_good">
      <h5 class="tex">商品名称:</h5>
      <input type="text" v-model="goods.gName" placeholder="请输入商品名称">
      <br>
      <h5 class="tex">商品价格:</h5>
      <input type="text" v-model="goods.price" placeholder="请输入商品价格">
      <br>
      <h5 class="tex">商品库存:</h5>
      <input type="text" v-model="goods.gInventory" placeholder="请输入商品库存">
    </div>
    <div class="A_decrease">
      <h5 class="tex2">商品描述:</h5>
      <input type="text" v-model="goods.gDescribe" class="Des" placeholder="请输入商品描述">
    </div>

    <!--按钮-->
    <div class="A_button">
      <!--增加按钮-->
      <input class="btn" type="button" value="保存" id="btn_add" @click="submitImportForm">
      <!--返回按钮-->
      <input class="btn" type="button" value="返回" id="btn_return" @click="toGoods">
    </div>
    <router-view></router-view>

  </el-form>
</template>

<script>
  import {updateNo, add, update} from '@/api/merchant'

  export default {
    name: 'Agoods',
    data() {
      return {
        //商品添加信息
        goods: {
          gId: '0',
          gImg: '',
          mId: this.$store.state.merchant.mid,
          gName: '',
          price: '',
          gInventory: '',
          gDescribe: '',
          picture: [],
          gState: '',
        },

        goodData: [],

        //upload组件所用到的参数
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false

      };
    },
    methods: {
      //转到商品列表
      toGoods() {
        this.$router.push({path: '/Goods'})
      },
      //上传文件
      uploadFile(file) {
        this.goods.picture = file.raw
      },
      //覆盖默认的上传行为，可以自定义上传的实现，将上传的文件依次添加到fileList数组中，支持多个文件
      httpRequest(option) {
        this.fileList.push(option)
      },
      //上传前处理
      beforeUpload(file) {
        let fileSize = file.size
        const FIVE_M = 5 * 1024 * 1024;
        //大于5M,不允许上传
        if (fileSize > FIVE_M) {
          this.$message.error("最大上传5M")
          return false
        }
        //判断文件类型
        let fileName = file.name
        let reg = /^.+(\.png)$/
        if (!reg.test(fileName)) {
          this.$message.error("只能上传xlsx！")
          return false
        }
        return true
      },
      //文件数量过多时提醒
      handleExceed() {
        this.$message({type: 'error', message: '最多支持1个图片上传'})
      },
      //保存按钮方法
      submitImportForm() {

        //使用form表单的数据格式
        const formData = new FormData()

        //将输入表单数据添加到params表单中
        formData.append('gId', this.goods.gId)
        formData.append('mId', this.goods.mId)
        formData.append('gName', this.goods.gName)
        formData.append('price', this.goods.price)
        formData.append('gInventory', this.goods.gInventory)
        formData.append('gDescribe', this.goods.gDescribe)
        formData.append("file", this.goods.picture)
        formData.append("gImg", this.goods.gImg)
        formData.append("gState", this.goods.gState)


        //判断新增还是修改
        if (this.goodData == null) {
          add(formData).then(result => {
            this.toGoods()
            // console.log(result)
          })
        } else {
          if (this.goods.picture.length === 0) {
            updateNo(formData).then(result => {
              // console.log(result)
              this.toGoods()
            })

          } else {
            update(formData).then(result => {
              // console.log(result)
              this.toGoods()
            })
          }
        }

      },
      //图片上的删除
      handleRemove(file) {
        console.log(file)
      },
      //图片上的放大
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    },
    created() {
      this.goodData = this.$route.query.Good

      if (this.goodData != null) {
        this.goods.gId = this.goodData.gid
        this.goods.gImg = this.goodData.gimg
        this.goods.gName = this.goodData.gname
        this.goods.price = this.goodData.price
        this.goods.gInventory = this.goodData.ginventory
        this.goods.gDescribe = this.goodData.gdescribe
        this.goods.gState = this.goodData.gstate
      }

    }
  }
</script>

<style scoped>
  .btn {
    background-color: #BEE8E8;
    border: black;
    height: 40px;
    width: 100px;
    border: 1px;
    border-radius: 30px;
    opacity: 0.7;
  }

  .A_picture {
    position: absolute;
    top: 30%;
    left: 30%;
    width: 400px;
    height: 200px;
    border: 0px solid #666;
  }

  .A_good {
    position: absolute;
    top: 20%;
    left: 60%;
  }

  .A_decrease {
    position: absolute;
    top: 55%;
    left: 30%;
  }

  .tex {
    margin-right: 100px
  }

  .Des {
    width: 750px;
    height: 100px;
  }

  .tex2 {
    margin-left: -680px;
  }

  .A_button {
    position: absolute;
    top: 85%;
    left: 49%;
  }

</style>
